<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            *{
                padding: 0px;
                margin:0px;
            }
            .d1{
                width:100px;
                height: 100px;
                background:red;
                /*设置绝对定位，脱离了常规的文档流*/
                position:absolute;
                /*
                    绝对定位：如果祖先元素没有设置定位方式，则相对于浏览器窗口
                    如果祖先元素设置定位方式(设置了非static定位)，则相对于离自己最近的非static定位的祖先元素
                */
                top:10px;
                left:20px;

            }
            .d2{
                width:200px;
                height: 200px;
                background:blue;
            }
            .d3{
                width:200px;
                height: 200px;
                border:1px solid blue;
                margin-left:300px;
                /*一般情况下，都会为父元素设置为相对定位*/
                position: relative;
            }
            .d4{
                width:100px;
                height: 100px;
                border:1px solid pink;
                position:absolute;
                /*top:100px;*/
                /*left:100px;*/
                right:20px;
                bottom:20px;
            }

        </style>
    </head>
    <body>
        <!--<div class="d1"></div>-->
        <!--<div class="d2"></div>-->
        <div class="d3">
            <div class="d4"></div>

        </div>
    </body>
</html>